<template>
  <div>
    <div class="center">
      <el-row :gutter="20">
        <el-col :span="24"><div class="centerTitle">测评报告</div></el-col>
      </el-row>
      <el-row :gutter="24" class="centerTable">
        <home-tab :tableData= "tableData" :tableConfig="tableConfig" :slotRow="true" @operation="goToOperation"/>
      </el-row>
      <el-row :gutter="24" class="fr">
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next" :total="total"> </el-pagination>
      </el-row>
    </div>
  </div>
</template>
<script>
import homeTab from '@/components/table.vue'
// import {APIGETGROUPLIST, APIGETGROUPLISTDOWNLOAD} from '@/common/api.js'
import downloadApi from '@/common/downloadApi.js'
export default {
  components: {homeTab},
  data () {
    return {
      Api: '',
      configRow: ['input', 'input', '', '', '', '', '', '', '', '', ''], // 配置的就是input、select 没有就是空
      configRowList: {
        plan_name: '',
        questionnaire_title: ''
      },
      tableData: [],
      tableConfig: {
        loading: false,
        class: 'table-list', // 表格的class名
        style: 'width:100%',
        checkout: false, // 控制是否有多选框
        index: true, // 是否有序号
        config: [
          {
            label: '测评计划名称',
            prop: 'title',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '组合或量表名称',
            prop: 'questionnaire_title',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '层级',
            prop: 'type_name',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '报告生成时间',
            prop: 'create_time',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '参与人数',
            prop: 'total_number',
            align: 'center',
            modelValue: ''
          },
          {
            label: '完成人数',
            prop: 'complete_number',
            align: 'center',
            modelValue: ''
          },
          {
            label: '测评开始时间',
            prop: 'start_time',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '测评结束时间',
            prop: 'end_time',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            prop: 'operation',
            label: '操作',
            list: [
              {id: 'analysis', name: '总报告分析'},
              {id: 'download', name: '下载'}
            ]
          }
        ]
      },
      currentPage: 1,
      total: 0,
      page: 1,
      form: {
        plan_name: '',
        questionnaire_title: ''
      }
    }
  },
  created () {
    this.tableList()
    this.Api = downloadApi
  },
  methods: {
    InIt () { // 初始化
      this.tableData = []
      const arrs = Object.keys(this.configRowList)
      const obj = {}
      arrs.map((item, index) => {
        obj[item] = this.configRow[index]
      })
      this.tableData.unshift(obj)
    },
    dataProcessing () { // 整理
      this.tableConfig.config.forEach(element => {
        if (element.label === '测评计划名称') {
          this.form.plan_name = element.modelValue
        }
        if (element.label === '组合或量表名称') {
          this.form.questionnaire_title = element.modelValue
        }
      })
      this.tableList()
    },
    tableList () { // 表格
      this.form.page = this.page
      // APIGETGROUPLIST(this.form).then((res) => {
      //   if (res.status === 1) {
      //     this.InIt()
      //     this.total = res.data.totalNumber
      //     this.currentPage = res.data.page
      //     res.data.list.forEach(item => {
      //       this.tableData.push(item)
      //     })
      //   } else {
      //     this.$message.error(res.msg)
      //     this.InIt()
      //   }
      // }).catch((err) => {
      //   this.$message.error(err.msg)
      // })
    },
    goToOperation (val) { // 按钮
      if (val.id === 'query') {
        this.dataProcessing()
      } else if (val.id === 'del') {
        this.form = []
        this.tableConfig.config.forEach(element => {
          element.modelValue = ''
        })
        this.tableList()
      } else if (val.id === 'analysis') {
        window.open('/report/page/groupReport/recommended.html?batch=' + val.rows.batch + '&school_id=' + val.rows.school_id + '&token=' + window.sessionStorage.getItem('token'))
      } else if (val.id === 'download') {
        this.downloadFn(val.rows)
      }
    },
    downloadFn (val) {
      // APIGETGROUPLISTDOWNLOAD({
      //   report_id: val.id
      // }).then((res) => {
      //   if (res.status === 1) {
      //     window.location.href = this.Api + res.data.url + '?report_info=' + res.data.report_info
      //   }
      // }).catch((err) => {
      //   this.$message.error(err.msg)
      // })
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    }
  }
}
</script>
